<template>
<base-content>
  <div class="flex justify-center items-center" style="height: 100vh">

    <div class="row base-card-shadow" style="width: 30vw;min-width: 300px">

      <div class="col flex justify-around items-center" style="background-color: #ffffff">
        <q-card square style="min-width: 290px;height: 100%; width: 60%;" class="no-shadow">
          <q-card-section align="center">
            <h4 class="text-uppercase" style="font-family: 'Microsoft YaHei'">学业预警管理平台</h4>
            <q-form @submit="logon">
            <!-- 用户名 -->
            <q-input class="logon-input"
               clearable
               standout="bg-cyan text-white"
               bottom-slots
               v-model="username"
               label="用户名"
            >
              <template v-slot:prepend>
                <q-icon name="account_circle"/>
              </template>
            </q-input>
            <!-- 密码 -->
            <q-input class="logon-input"
               standout="bg-cyan text-white"
               bottom-slots
               v-model="password"
               label="密码"
               :type="isPwd ? 'password' : 'text'" hint=""
            >
              <template v-slot:prepend>
                <q-icon name="vpn_key"/>
              </template>
              <template v-slot:append>
                <q-icon
                  :name="isPwd ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="isPwd = !isPwd"
                />
              </template>
            </q-input>
            <div class="flex justify-between " style="height: 40px">
              <q-radio dense v-model="userType" val="student" label="我是学生" />
              <q-radio dense v-model="userType" val="admin" label="我是管理员" />
              <q-radio dense v-model="userType" val="parent" label="我是家长" />
            </div>

            <!-- 登录按钮 -->
            <q-btn
              :loading="loading"
              class="logon-btn bg-logon-card-input"
              text-color="white"
              unelevated
              label=""
              style="font-size: large;"
              type="submit"
            >登 录 系 统
            </q-btn>
            </q-form>
            <div class="row justify-between" style="margin-bottom: 20px;">
              <q-btn flat label="找回密码" @click="updatePassword()"/>

              <q-btn outline label="家长注册" @click="register()"/>

            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</base-content>
</template>

<script>

import BaseContent from '../../components/BaseContent/BaseContent'
export default {
  components: {
    BaseContent
  },
  name: 'logon',
  data () {
    return {
      isPwd: true,
      username: 'admin',
      password: '',
      userType: 'student',
      defaultOptions: {
        path: 'https://assets9.lottiefiles.com/packages/lf20_vo0a1yca.json',
        loop: true
      },
      loading: false,
      percentage: 0,
      isLottieF: false
    }
  },
  methods: {

    /**
     * 登录
     */
    logon () {
      this.loading = !this.loading
      const query = {
        url: '/logonServlet',
        type: 'FORM',
        data: {
          p1: this.username,
          p2: this.password,
          p3: this.userType
        }
      }
      this.$fetchData(query).then((res) => {
        console.log(res)
        if (typeof res.data === 'object') {
          sessionStorage.setItem('access_token', 972784674)
          sessionStorage.setItem('user_role', res.data.type)
          sessionStorage.setItem('user_object', JSON.stringify(res.data))// 登录成功后保存用户登录信息，以json字符串方式
          if (res.data.type === 'stu') {
            this.$router.push('/')
          }
          if (res.data.type === 'admin') {
            this.$router.push('/')
          }
          if (res.data.type === 'class_admin') {
            this.$router.push('/')
          }
          if (res.data.type === 'parent') {
            this.$router.push('/')
          }
        } else {
          this.$q.notify({
            icon: 'announcement',
            message: res.data,
            color: 'red',
            position: 'top',
            timeout: 1500
          })
        }
        this.loading = !this.loading
      }).catch((e) => {
        this.loading = !this.loading
        console.log(e)
      })
    },
    register () {
      console.log(1)
      console.log(this.$router)
      this.$router.push({
        path: '/parentRegister'
      })
    },
    updatePassword () {
      console.log(1)
      console.log(this.$router)
      this.$router.push({
        path: '/forgetPassWord'
      })
    },
    handleFinish (e) {
      this.isLottieF = e
    }
  }
}
</script>

<style scoped>
  .logon-btn {
    font-size: large;
    margin-top: 0px;
    margin-bottom: 20px;
    width: 100%;
  }

  .bg-logon-card-input {
    background: linear-gradient(to right, #36d1dc 1%, #5b86e5 99%);
    transition: all 0.3s ease-in-out;
    background-size: 200% auto;
  }

  .bg-logon-card-input:hover {
    background-position: right center;
    box-shadow: 0 12px 20px -11px #5b86e5;
  }
</style>
